<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>

<html>
<head>
    <title>学生管理系统</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

<div class="container mt-5">
    <div class="row mb-3" style="position: relative; left:-38%; bottom: -25px;">
        <div class="col-12">
            <form id="searchForm" action="${pageContext.request.contextPath}/QueryStudentAllServlet" method="get" class="form-inline justify-content-center">
                <div class="form-group mx-sm-3 mb-2">
                    <label for="searchName" class="sr-only">姓名</label>
                    <input type="text" class="form-control" id="searchName" name="name" placeholder="请输入姓名" required>
                </div>
                <button type="submit" class="btn btn-primary mb-2">查询</button>
            </form>
        </div>
    </div>
    <hr>
    <form id="bulkDeleteForm" action="${pageContext.request.contextPath}/delete" method="post" onsubmit="return confirmBulkDelete()">
        <div class="table-responsive">
            <table class="table table-striped table-bordered">
                <thead class="thead-dark">
                <tr>
                    <th scope="col"><input type="checkbox" id="selectAll" onclick="toggleSelectAll()"></th>
                    <th scope="col">ID</th>
                    <th scope="col">姓名</th>
                    <th scope="col">年龄</th>
                    <th scope="col">性别</th>
                    <th scope="col">专业</th>
                    <th scope="col">年级班别</th>
                    <th scope="col">地址</th>
                    <th scope="col">电话</th>
                    <th scope="col" style="display: flex;">
                        <button type="submit" class="btn btn-danger btn-sm" style="font-size: 12px;">批量删除</button>
                        <button type="button" class="btn btn-warning btn-sm" style="font-size: 12px;"><a href="Addstudent.jsp" class="text-white">添加学生</a></button>
                    </th>
                </tr>
                </thead>
                <tbody id="userList">
                <c:forEach var="user" items="${applicationScope.userList}">
                    <tr>
                        <td><input type="checkbox" class="selectItem" name="ids" value="${user.id}"></td>
                        <td>${user.id}</td>
                        <td>${user.name}</td>
                        <td>${user.age}</td>
                        <td>${user.gender}</td>
                        <td>${user.major}</td>
                        <td>${user.clname}</td>
                        <td>${user.address}</td>
                        <td>${user.phone}</td>
                        <td>
                            <button type="button" class="btn btn-danger btn-sm"  style="margin-left: 28px;" onclick="deleteSingle(${user.id})">删除</button>
                            <button type="button" class="btn btn-success btn-sm" onclick="updateUser(${user.id})">修改</button>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </form>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script>
    // Function to fetch updated data
    function fetchStudentData() {
        $.ajax({
            url: '${pageContext.request.contextPath}/QueryStudentAllServlet',
            method: 'GET',
            success: function(response) {
                var userList = JSON.parse(response);
                var userTableBody = $('#userList');
                userTableBody.empty(); // Clear current list

                $.each(userList, function(index, user) {
                    userTableBody.append(
                        '<tr>' +
                        '<td><input type="checkbox" class="selectItem" name="ids" value="' + user.id + '"></td>' +
                        '<td>' + user.id + '</td>' +
                        '<td>' + user.name + '</td>' +
                        '<td>' + user.age + '</td>' +
                        '<td>' + user.gender + '</td>' +
                        '<td>' + user.major + '</td>' +
                        '<td>' + user.clname + '</td>' +
                        '<td>' + user.address + '</td>' +
                        '<td>' + user.phone + '</td>' +
                        '<td>' +
                        '<button type="button" class="btn btn-danger btn-sm" onclick="deleteSingle(' + user.id + ')">删除</button> ' +
                        '<button type="button" class="btn btn-success btn-sm" onclick="updateUser(' + user.id + ')">修改</button>' +
                        '</td>' +
                        '</tr>'
                    );
                });
            },
            error: function() {
                alert('无法获取学生数据。');
            }
        });
    }

    // Load data when the page is ready
    $(document).ready(function() {
        fetchStudentData();
    });

    function toggleSelectAll() {
        var selectAllCheckbox = document.getElementById('selectAll');
        var checkboxes = document.getElementsByClassName('selectItem');
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = selectAllCheckbox.checked;
        }
    }

    function confirmDelete() {
        return confirm('你确定要删除这个用户吗？');
    }

    function confirmBulkDelete() {
        var selectedItems = document.querySelectorAll('.selectItem:checked');
        if (selectedItems.length === 0) {
            alert('请选择至少一个用户进行删除。');
            return false;
        }
        return confirm('你确定要删除选中的用户吗？');
    }

    function deleteSingle(id) {
        if (confirm('你确定要删除这个用户吗？')) {
            var form = document.createElement('form');
            form.method = 'post';
            form.action = '${pageContext.request.contextPath}/delete';

            var input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'ids';
            input.value = id;

            form.appendChild(input);
            document.body.appendChild(form);
            form.submit();
        }
    }

    function updateUser(id) {
        var form = document.createElement('form');
        form.method = 'post';
        form.action = '${pageContext.request.contextPath}/EchoUser';

        var input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'id';
        input.value = id;

        form.appendChild(input);
        document.body.appendChild(form);
        form.submit();
    }

    function logout() {
        window.location.href = '${pageContext.request.contextPath}/logout';
    }
</script>

</body>
</html>
